import React from "react";
import AppLoading from "./loading";

/**
 * 全局资源配置
 */
interface AppViewResource {
  name: string;  // 路由资源标识，保证唯一，后台根据name确定每个资源的身份
  description?: string;  // 描述信息
  label: string;
  component?: string | null; // 默认状态前端提供component、path的路径，后端数据存在时覆盖
  path: string;
  icon?: string | null;
  sort?: number;
  parent?: string | null;
  privilege?: string | null;
  type?: 'group' | string
  hideMenu?: boolean
}

const buildAppViewResource = (configs: AppViewResource) => {
  return {
    sort: 0,
    description: configs?.label,
    ...configs
  } as AppViewResource
}

/**
 * 应用支持的视图资源。每个路由信息和对应组件配置在这,统一封装成 AppViewResource
 */
const appViewResources: AppViewResource[] = [
  // 首页
  buildAppViewResource(
    {
      name: 'HOME_VIEW', 
      label: '首页',
      component: '@/pages/home',
      path: '/home',
      parent: null,
    } as AppViewResource),
  // 工具管理
  buildAppViewResource(
    {
      name: 'TOOL_VIEW', 
      label: '常用工具',
      // component: '@/pages/home',
      path: '/tools',
      parent: null,
      type: 'group',
      sort: 10,
    } as AppViewResource),
  // 工具-工具列表  
  buildAppViewResource(
    {
      name: 'TOOL_LIST_VIEW', 
      label: '工具列表',
      component: '@/pages/tools/ai_tools',
      path: '/tools/tool-list',
      parent: 'TOOL_VIEW',
    } as AppViewResource),
  // 工具-故事策划工具
  buildAppViewResource(
    {
      name: 'STORY_DESIGN_VIEW', 
      label: '故事策划工具',
      component: '@/pages/tools/twine_tool',
      path: '/tools/twine-tool',
      parent: 'TOOL_VIEW'
    } as AppViewResource),
  // 工具-文案工具
  buildAppViewResource(
    {
      name: 'AI_DOC_VIEW', 
      label: 'AI文案',
      component: '@/pages/tools/ai_doc',
      path: '/tools/ai-doc',
      parent: 'TOOL_VIEW'
    } as AppViewResource),
  // 工具-GPT。（废弃，无服务器资源支持部署）
  buildAppViewResource(
    {
      name: 'GPT_VIEW', 
      label: 'GPT',
      component: '@/pages/tools/gpt',
      path: '/tools/gpt',
      parent: 'TOOL_VIEW'
    } as AppViewResource),
  // 工具-CSS测试编辑器
  buildAppViewResource(
    {
      name: "CSS_TOOL_VIEW",
      label: "CSS编辑器",
      component: '@/pages/tools/css_tool',
      path: '/tools/css-tool',
      parent: 'TOOL_VIEW',
    } as AppViewResource),
  // 工具-PDF工具
  buildAppViewResource(
    {
      name: "PDf_TOOL_VIEW",
      label: "PDF工具",
      component: '@/pages/tools/pdf_tool',
      path: '/tools/pdf-tool',
      parent: 'TOOL_VIEW',
    } as AppViewResource),
  // 博客管理
  buildAppViewResource(
    {
      name: 'POST_VIEW', 
      label: '博客管理',
      // component: '@/pages/tools/gpt',
      path: '/post',
      parent: null,
      type: 'group',
      sort: 20,
    } as AppViewResource),
  // 博客管理--博客列表
  buildAppViewResource(
    {
      name: 'POST_LIST', 
      label: '博客列表',
      component: '@/pages/posts/list',
      path: '/post/post-list',
      parent: 'POST_VIEW'
    } as AppViewResource),
  // 博客管理-博客编辑
  buildAppViewResource(
    {
      name: 'POST_EDITOR', 
      label: '博客编辑',
      component: '@/pages/posts/editor',
      path: '/post/post-editor',
      parent: 'POST_VIEW'
    } as AppViewResource),
    // 博客管理-博客详情
  buildAppViewResource(
    {
      name: 'POST_DETAIL', 
      label: '博客详情',
      component: '@/pages/posts/detail',
      path: '/post/detail',
      parent: 'POST_VIEW',
      hideMenu: true,
    } as AppViewResource),
  // 系统管理
  buildAppViewResource(
    {
      name: 'SYSTEM_MANAGER_VIEW', 
      label: '系统管理',
      // component: '@/pages/tools/gpt',
      path: '/system',
      parent: null,
      type: 'group',
      sort: 100,
    } as AppViewResource),
  // 系统管理-用户管理
  buildAppViewResource(
    {
      name: 'USER_VIEW', 
      label: '用户管理',
      component: '@/pages/system/user',
      path: '/system/user',
      parent: 'SYSTEM_MANAGER_VIEW'
    } as AppViewResource),
  // 系统管理-角色管理
  buildAppViewResource(
    {
      name: 'ROLE_VIEW', 
      label: '角色管理',
      component: '@/pages/system/role',
      path: '/system/role',
      parent: 'SYSTEM_MANAGER_VIEW'
    } as AppViewResource),
  // 系统管理-系统设置
  buildAppViewResource(
    {
      name: 'CONFIG_VIEW', 
      label: '系统设置',
      component: '@/pages/system/config',
      path: '/system/config',
      parent: 'SYSTEM_MANAGER_VIEW'
    } as AppViewResource),
  // 其他
  buildAppViewResource(
    {
      name: 'OTHER_VIEW', 
      label: '其他',
      path: '/other',
      parent: null,
      type: 'group',
      sort: 90
    } as AppViewResource),
  // 其他-关于
  buildAppViewResource(
    {
      name: 'ABOUT_VIEW', 
      label: '关于',
      component: '@/pages/other/about',
      path: '/other/about',
      parent: 'OTHER_VIEW',
      
    } as AppViewResource),
]

const nameToAppViewResource = (name: string): AppViewResource => {
    const res: AppViewResource | undefined = appViewResources.find(item => item.name === name)
    if (!res) {
        throw Error("页面app不支持的资源: " + name)
    }
    return res;
}

/**
 * 默认支持的视图资源
 */
const defaultViewResponse: AppViewResource[] = [
    nameToAppViewResource("HOME_VIEW"),
    nameToAppViewResource("TOOL_VIEW"),

    nameToAppViewResource("TOOL_LIST_VIEW"),
    nameToAppViewResource("STORY_DESIGN_VIEW"),
    nameToAppViewResource("AI_DOC_VIEW"),
    nameToAppViewResource("GPT_VIEW"),
    nameToAppViewResource("CSS_TOOL_VIEW"),

    nameToAppViewResource("POST_VIEW"),
    nameToAppViewResource("POST_LIST"),
    nameToAppViewResource("POST_DETAIL"),
    
    nameToAppViewResource("OTHER_VIEW"),
    nameToAppViewResource("ABOUT_VIEW"),
]

/**
 * 路由检查。后端配置的每一个视图资源，前端均已配置对应name的路由则认为该路由正常。
 */
const checkViewResource = (webRoutes: AppViewResource[], serverRoutes: AppViewResource[]): AppViewResource[] => {
  const errorList: AppViewResource[] = []
  webRoutes?.forEach(webRoute => {
    const idx = serverRoutes.findIndex(serverRoute => {
      return serverRoute.name === webRoute.name
    })
    if (idx === -1) {
      errorList.push(webRoute)
    }
  })
  serverRoutes?.forEach(serverRoute => {
    const idx = webRoutes.findIndex(webRoute => {
      return serverRoute.name === webRoute.name
    })
    if (idx === -1) {
      errorList.push(serverRoute)
    }
  })
  return errorList
}

const deepClone = (obj: any) => {
  if (!obj) {
    return null
  }
  return JSON.parse(JSON.stringify(obj))
}

const AppLoadingComp = <AppLoading/>

const DynamicComponent = (path: string) => {
  const Comp = React.lazy(() => import(`@/${path.slice(2)}`))
  return <React.Suspense fallback={AppLoadingComp}>
    <Comp></Comp>
  </React.Suspense>
}

export {
  checkViewResource,
  appViewResources,
  deepClone,
  AppViewResource,
  DynamicComponent,
  defaultViewResponse,
  nameToAppViewResource
}